<template>
    <div class='header'>
        <div class="header-left">
            <div class='iconfont iconback'>
                &#xe6c1;
            </div>
        </div>
        <div class="header-input">
            <span class='iconfont search-icon'>
                &#xe634;
                输入城市/景点/游玩/主题
            </span>
        </div>
        <router-link to='/city'>
            <div class="header-right">
                {{this.city}}
                <span class='iconfont arrow-icon'>
                    &#xe625;
                </span>
            </div>
        </router-link>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    name: 'HomeHeader',
    computed: {
        ...mapState(['city'])
    }
}
</script>

<style lang='stylus' scoped>
    @import '~styles/varibles.styl'
    .header
        height: $headerHeight
        display: flex
        line-height: $headerHeight
        color #fff
        background: $bgColor
        .header-left
            float: left 
            width: .64rem
            text-align: center 
            .iconback
                font-size: .4rem  
        .header-input
            color: #ccc
            background: #fff
            flex:1
            border-radius: .1rem
            margin-top: .12rem
            margin-left: .2rem
            height: .64rem
            line-height: .64rem
            padding-left: .2rem
            .search-icon
                font-size .28rem
        .header-right
            color #fff
            float: right
            min-width: 1.04rem
            padding 0 .1rem
            text-align: center
            .arrow-icon
                font-size .24rem
                margin-left -.1rem
</style>

